import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useLocation } from 'react-router-dom';
import LanguageSwitcher from './LanguageSwitcher';
import './Header.css';

const Header = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  
  // Check for mock authentication
  const isAuthenticated = !!localStorage.getItem('mockAuthToken');
  const user = isAuthenticated ? JSON.parse(localStorage.getItem('mockUser') || '{}') : null;
  
  const handleLogout = () => {
    localStorage.removeItem('mockAuthToken');
    localStorage.removeItem('mockUser');
    navigate('/');
  };
  
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };
  
  // Don't show header on auth and landing pages
  if (location.pathname === '/auth' || location.pathname === '/') {
    return null;
  }
  
  return (
    <header className="app-header">
      <div className="header-container">
        <div className="header-logo" onClick={() => navigate('/')}>
          <span className="logo-icon">⏳</span>
          <span className="logo-text">时光相册</span>
        </div>
        
        <nav className={`header-nav ${isMenuOpen ? 'open' : ''}`}>
          <button
            className={`nav-item ${location.pathname === '/dashboard' ? 'active' : ''}`}
            onClick={() => { navigate('/dashboard'); setIsMenuOpen(false); }}
          >
            {t('header.dashboard')}
          </button>
          <button
            className={`nav-item ${location.pathname === '/timeline' ? 'active' : ''}`}
            onClick={() => { navigate('/timeline'); setIsMenuOpen(false); }}
          >
            {t('header.timeline')}
          </button>
          <button
            className={`nav-item ${location.pathname === '/albums' ? 'active' : ''}`}
            onClick={() => { navigate('/albums'); setIsMenuOpen(false); }}
          >
            {t('header.albums')}
          </button>
          <button
            className={`nav-item ${location.pathname === '/social' ? 'active' : ''}`}
            onClick={() => { navigate('/social'); setIsMenuOpen(false); }}
          >
            {t('header.social')}
          </button>
          <button
            className={`nav-item ${location.pathname === '/upload' ? 'active' : ''}`}
            onClick={() => { navigate('/upload'); setIsMenuOpen(false); }}
          >
            {t('header.upload')}
          </button>
          <button
            className={`nav-item ${location.pathname === '/ai' ? 'active' : ''}`}
            onClick={() => { navigate('/ai'); setIsMenuOpen(false); }}
          >
            {t('header.ai')}
          </button>
          <button
            className={`nav-item ${location.pathname === '/profile' ? 'active' : ''}`}
            onClick={() => { navigate('/profile'); setIsMenuOpen(false); }}
          >
            {t('header.profile')}
          </button>
        </nav>
        
        <div className="header-actions">
          <LanguageSwitcher />
          
          {isAuthenticated && user ? (
            <div className="user-menu">
              <div className="user-avatar" onClick={toggleMenu}>
                <span>{user.name.charAt(0).toUpperCase()}</span>
              </div>
              <div className={`user-dropdown ${isMenuOpen ? 'open' : ''}`}>
                <div className="user-info">
                  <div className="user-name">{user.name}</div>
                  <div className="user-email">{user.email || user.phone}</div>
                </div>
                <div className="dropdown-divider"></div>
                <button className="dropdown-item" onClick={() => { navigate('/profile'); setIsMenuOpen(false); }}>
                  {t('header.profile')}
                </button>
                <button className="dropdown-item" onClick={() => { navigate('/settings'); setIsMenuOpen(false); }}>
                  {t('header.settings')}
                </button>
                <div className="dropdown-divider"></div>
                <button className="dropdown-item logout-btn" onClick={handleLogout}>
                  {t('header.logout')}
                </button>
              </div>
            </div>
          ) : (
            <button
              className="login-btn"
              onClick={() => navigate('/auth')}
            >
              {t('header.login')}
            </button>
          )}
          
          <button 
            className="mobile-menu-btn" 
            onClick={toggleMenu}
            aria-label="Toggle menu"
          >
            <span className={`hamburger ${isMenuOpen ? 'open' : ''}`}></span>
          </button>
        </div>
      </div>
    </header>
  );
};

export default Header;